
<template>
    <div>
      <!-- 头部 -->
      <!-- <Header></Header> -->
      <div class="content">
        <div class="carousel">
          <el-carousel height="300px">
            <el-carousel-item v-for="item in carousel" :key="item.id">
              <img v-bind:src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
  
        <div class="wrapper">
          <div class="plates">
            <div class="plate" v-for="w in wenzhang" :key="w.category.id">
              <div class="head">
                <div class="title">{{ w.category.name }}</div>
                <div class="more" @click="tolist(w.category)">更多</div>
              </div>
              <ul class="list">
                <li v-for="a in w.aritcle" :key="a.id" @click="toWenzhang(a)">{{ a.title }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 底部 -->
      <!-- <Footer></Footer> -->
    </div>
  </template>
  
  <script>
  import { get } from "./../util/request";
//   import Header from "./components/Header.vue";
//   import Footer from "./components/Footer.vue";
  export default {
    // components: { Header, Footer },
    data() {
      return {
        carousel: [],
        wenzhang:[],
      };
    },
    methods: {
      loadCarousel() {
        let url = "/index/carousel/findAll";
        get(url).then((resp) => {
          console.log(resp.data);
          this.carousel = resp.data;
        });
      },
      loadWenzhang(){
        let url = "index/article/findCategoryArticles";
        get(url).then((resp) => {
          console.log(resp.data);
          this.wenzhang = resp.data;
        });
      },
      ///传递参数
      toWenzhang(aritcle){
        this.$router.push({
          path:'/wenzhang',
          // 传递参数
          // query -get -xxx?id=2
          //params=post xxx/:id  ---->安全性
          query:{
            id:aritcle.id
          }
        })
      },
      tolist(w){
        this.$router.push({
          path:'/list',
          query:w,
        })
      }
    },
    created() {
      this.loadCarousel();
      this.loadWenzhang();
    },
  };
  </script>
  
  
  <style lang="scss">
  $color: #3d9bf0;
  .content {
    background-color: aliceblue;
    .carousel {
      content: ""; ///假设没有图，用空来占位
      display: block;
      clear: both; //清除两边的浮动
      img {
        width: 100%;
        height: 100%;
      }
    }
    .plates::after{
      content:'';
      display: block;
      clear: both;
    }
    .plates {
      .plate {
        width: 30%;
        height: 300px;
        box-sizing: border-box;
        background-color: #fff;
        padding: 0.5em;
        float: left;
        margin-right: 1%;
        margin-bottom: 0.5em;
        .head {
          display: flex;
          justify-content: space-between;
          .title{
            font-size: 20px;
            font-weight: bold;
            color: $color;
          }
          .more{
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        ul.list{
          li{
            white-space: nowrap;//超出文本框之后干什么，不换行，显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
          }
        }
      }
    }
  }
  </style>